<template>
    <!-- 添加患者信息 -->
    <div class="Re_patient">
        <!--有点击事件-->
        <header class="Re_patient_header" @click="Re_patient_header">
            <p><img src="../../../static/imgs/return.png" class="Re_patient_header_return"></p>
            <p>添加患者信息</p>
        </header>
        
    <main class="main">
             <section class="conent_top">
                    <p>
                        <img src="../../../static/imgs/dd_txx.png">
                        <input type="text" placeholder="请输入姓名">
                    </p>
                    <p>
                        <img src="../../../static/imgs/dd_infs.png">
                        <input type="text" placeholder="请输入身份证号">
                        <img src="../../../static/imgs/dd-chian.png" class="china">
                    </p>
                    <p>
                        <img src="../../../static/imgs/dd_icot.png">
                        <span>性别</span>
                        <b>
                            <span class="round" :class="{rot:rot==1}" @click="rot=1"></span> 男
                            <span class="round round2" :class="{rot:rot==2}" @click="rot=2"></span> 女
                        </b>
                    </p>
                    <p>
                        <img src="../../../static/imgs/dd_dulb.png">
                        <a>与患者的关系</a>
                    </p>
              
             </section>
            <!--请求的后台数据-->
             <section class="conent_bott">
                  <section class="conent_bottom inset_bottom ">
	  	               <div v-for="infors in inset_bottom" :class="{active:bg==1}" @click="bg=1">{{infors.name1}}</div>
	  	               <div v-for="infors in inset_bottom"  :class="{active:bg==2}" @click="bg=2">{{infors.name2}}</div>
	  	               <div v-for="infors in inset_bottom"  :class="{active:bg==3}" @click="bg=3">{{infors.name3}}</div>
	  	               <div v-for="infors in inset_bottom"  :class="{active:bg==4}" @click="bg=4">{{infors.name4}}</div>
	  	               <div v-for="infors in inset_bottom"  :class="{active:bg==5}" @click="bg=5">{{infors.name5}}</div>
	  	               <div v-for="infors in inset_bottom"  :class="{active:bg==6}" @click="bg=6">{{infors.name6}}</div>
	  	               <div v-for="infors in inset_bottom"  :class="{active:bg==7}" @click="bg=7">{{infors.name7}}</div>
                  	
                  </section>
            </section>
    </main>
        
<!--有点击事件-->
  <footer class="footer">
        <p>保存</p>
  </footer>
    </div>
</template>
<script>
    export default {
        name:'Re_patient',
        data:function(){
        	return {
        		rot:-1,
        		inset_bottom:[],
        		bg:-1
        	}
        },
        methods:{
        	Re_patient_header:function(){
        		this.$router.go(-1)
        	},
        	
        },
         created () {
          this.$axios.get('/api/Re_patient').then(rep=>{
            this.inset_bottom = rep.data.list;
          });
        }

    }

</script>
<style scoped lang='less'>
    .PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

.Flex{
    display:flex;
    justify-content: space-between;
    align-items: center;
    
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}

.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}

.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}

.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-right,@right);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-left,@left);
}

.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}

.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

.Re_patient_header{
        .Flex;
        .PxToRem(font-size, 35);
        .PxToRem(height, 88);
         background: url(../../../static/imgs/Reg_serve_bg01.jpg);
         padding:0 2%;
     p:nth-child(1){
        
           span{
              .PxToRem(margin-left, 39);
               .PxToRem(margin-bottom, 39);
           }
           img{
               .PxToRem(width, 55);
               .PxToRem(height, 55);
           }
   }
     p:nth-child(2){
       .PxToRem(padding-left, 57);
       flex: 2;
       
   }
}

.main{
	
     .conent_top{
        .PxToRem(font-size, 30);
       p{  
           border: 1px solid #e6e6e6;
           padding: 5% 2% ;
          
           .Flex;
           input{  flex: 1;
                   border: none;
                   padding-left: 2%;
              }
           span{
               flex: 3;
               .PxToRem(padding-left, 51);
               color: #999999;
           }
           
           b{
              display: flex;
              align-items: center;
           }
           a{
             color: #999999;
             flex: 2;
             .PxToRem(padding-left, 41); 
             text-decoration: none;
           }
    
       }
        p:nth-child(1){
        img{
               .PxToRem(width, 64);
               .PxToRem(height, 62); 
           }   
       }
        p:nth-child(2){
         
        .china{
               .PxToRem(width, 153);
               .PxToRem(height, 75);
         }                
       }
       p:nth-child(3){
           .rot{ background:url("../../../static/imgs/dd-checked.png");}
        img{
               .PxToRem(width, 62);
               .PxToRem(height, 55); 
           }
          .round{
               .PxToRem(width, 38);
               .PxToRem(height, 38);
               .PxToRem(border-radius, 19);
               border: 1px solid #d2d2d2;
               padding: 1% 2%;
               
          } 
          .round2{
             .PxToRem(margin-left, 80);
          }
              
       }
       p:nth-child(4){
           border: none;
           img{
               .PxToRem(width, 71);
               .PxToRem(height, 70); 
           }
       }
    }
  
   .conent_bott{
        .Flex;
        justify-content: center;
        padding:0 4%;
        .conent_bottom{
            .PxToRem(width, 990);
            .Flex;
            justify-content: initial;
             flex-wrap: wrap;
             div{
               width: 20%; 
               .PxToRem(height, 81);
               .PxToRem(margin-bottom, 40);
               .PxToRem(font-size, 35);
               .PxToRem(line-height, 81);
               .PxToRem(border-radius, 26);
                margin-right:2.32%;
                margin-left:2.32%;
                border: 1px solid #999999;
                text-align: center; 
          }
           div:nth-child(8){
              border: none;
           }
            .bg{background: #1CC6A2;color: #fff;}
         }
     }
.active{
        background: #1cc6a3;
        color:#fff;
    }
    
.background{
    background:url(../../../static/imgs/btn.png) no-repeat;
}
   
}


.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
      .Flex;
      justify-content: center;
    p{    
        .PxToRem(width, 659);
        .PxToRem(height, 93);
         background: #1cc6a2;
        .PxToRem(border-radius,18);
         margin: 0 auto;
         text-align: center;
        .PxToRem(line-height, 93);
         color: #fff;
        .PxToRem(margin,43);
        .PxToRem(font-size,50);
        
    }
    
   
    
}

</style>



